<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>div{
        width: 50px;height: 50px;padding: 50px;border: 10px solid peru;
        margin: 0px;
        background-color: red;
        overflow: hidden;
    }

  /**{*/
        /*padding: 0;*/
        /*margin: 0;*/
    /*}*/
    .two{/*
    padding  可以直接写4个方向的距离
    4个: 上右下左
    3个: 上右下 左没写 会与右保持一致
    2个:上右   左与右 一致  下与上一致
    */
      padding: 10px  20px 30px 40px;
    }
        .three{
            width: 50px;
            background-color:  hotpink;
            /*
            如果想要覆盖 切记用小属性去 叠大属性
            */
            padding: 10px;
            padding-bottom: 20px;

        }
   
    </style>
</head>
<body>
<!--什么标签是盒子
所有里面能放东西的标签都是盒子
比如div,span,a
比如img 表单,等等 就是不是盒子
一个盒子主要由 四部分组成:
内容:    设置的宽高 就是设置内容的宽高
padding: 内容到边框距离
border:  边框的粗细
margin: 从边框以外 多少地方不能有其他元素
-->
<div>
    <img src="http://placekitten.com/50/50">

</div>
<div class="two">
    <img src="http://placekitten.com/50/50">
</div>
<div class="three">
    <img src="http://placekitten.com/50/50">
</div>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

</body>
</html>